import styles from "./index.module.less";
import Card from "../Card";
import CustomColLabel from "../CustomColLabel";
import { Button, Col, Row, Flex, Divider, Space } from "antd";
import {
	ProFormCheckbox,
	ProFormDependency,
	ProFormDigit,
	ProFormList,
	ProFormRadio,
	ProFormText
} from "@ant-design/pro-components";
import { getAfterSaleServiceList, getDeliveryTimeList } from "@/api/modules/product";
import { map } from "lodash";

export default props => {
	const { isView } = props;

	return (
		<Card title="销售信息">
			<>
				<Row>
					<CustomColLabel label="销售规格" className={styles.label} isRequired={true} />
					<Col span={20} className={styles.box_bg}>
						<Row className={styles.header} gutter={20}>
							<Col span={9}>
								<label>规格描述</label>
							</Col>
							<Col span={5}>
								<label>价格</label>
							</Col>
							<Col span={5}>
								<label>库存</label>
							</Col>
							<Col span={5}>
								<label>操作</label>
							</Col>
						</Row>
						<Row>
							<Col span={19} className={styles.name}>
								<ProFormText
									initialValue={"规格"}
									name="specs_title"
									placeholder={"请输入规格名称"}
									rules={[{ required: true, message: "" }]}
								/>
							</Col>
						</Row>
						<ProFormList
							min={1}
							name="sales_specs"
							initialValue={[{}]}
							copyIconProps={false}
							deleteIconProps={false}
							creatorButtonProps={false}
							className={styles.form_list}
						>
							{(meta, index, action, count) => {
								return (
									<Row gutter={20}>
										<Col span={9} className={styles.form_list_name_wrap}>
											<Flex>
												<div className={styles.form_list_num}>{index + 1}.</div>
												<ProFormText name="spec_name" placeholder={"如：10斤装"} rules={[{ required: true, message: "" }]} />
											</Flex>
										</Col>
										<Col span={5}>
											<ProFormDigit
												name="price"
												placeholder={""}
												fieldProps={{ suffix: "元/件" }}
												rules={[{ required: true, message: "" }]}
											/>
										</Col>
										<Col span={5}>
											<ProFormDigit
												name={"stock"}
												placeholder={""}
												fieldProps={{ suffix: "件" }}
												rules={[{ required: true, message: "" }]}
											/>
										</Col>
										<Col span={5}>
											<Flex justify="center" align="center">
												{count > 1 && (
													<Button size="small" type="link" onClick={() => action.remove(index)}>
														删除
													</Button>
												)}
												{index === count - 1 && count < 5 && (
													<>
														{count > 1 && <Divider type="vertical" />}
														<Button size="small" type="link" onClick={() => action.add()}>
															增加
														</Button>
													</>
												)}
											</Flex>
										</Col>
									</Row>
								);
							}}
						</ProFormList>
					</Col>
				</Row>
				{/* <ProFormDigit
					className={styles.total_input}
					name="total"
					label="总库存"
					rules={[{ required: true, message: "请输入" }]}
					initialValue={0}
					fieldProps={{
						suffix: "件",
						style: { width: "400px", background: "#F1F2F5" },

						className: styles.total_input
					}}
				/> */}
				<ProFormRadio.Group
					label="发货时效"
					name="timelines_id"
					rules={[{ required: true, message: "请选择" }]}
					request={async () => {
						const res = await getDeliveryTimeList();
						return map(res?.data, i => ({
							...i,
							label: i?.timelines_name,
							value: i?.timelines_id
						}));
					}}
				/>
				<ProFormRadio.Group
					label="是否包邮"
					name="shipping_fee"
					rules={[{ required: true, message: "请选择" }]}
					fieldProps={{
						className: styles.free_shipping
					}}
					options={[
						{ label: "包邮", value: 0 },
						{
							label: (
								<Space size={20}>
									<span>不包邮</span>
									<ProFormDependency name={["shipping_fee"]}>
										{({ shipping_fee }) => {
											const isNot = shipping_fee == 1;

											return (
												<ProFormDigit
													name="shipping_fee_num"
													rules={[{ required: isNot, message: "" }]}
													fieldProps={{
														suffix: "元",
														disabled: !isNot || isView
													}}
												/>
											);
										}}
									</ProFormDependency>
								</Space>
							),
							value: 1
						}
					]}
				/>

				<ProFormCheckbox.Group
					label="售后(可多选)"
					name="aftersales_options"
					rules={[{ required: true, message: "请选择" }]}
					request={async () => {
						const res = await getAfterSaleServiceList();
						return map(res?.data, i => ({
							...i,
							label: i?.aftersales_option_name,
							value: i?.aftersales_option_id
						}));
					}}
				/>
			</>
		</Card>
	);
};
